<template>
  <div style="overflow:scroll;">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="true" :bottom-all-loaded="allLoaded" ref="loadmore">
      <div class="top_box" v-if='AppCover'>
        <img :src="AppCover" class="bgimg"> 
        <img class="logo" :src="'http://api2.nahuo.com/v3/shop/userlogo/' + ShopUserID">
        <div class="shopUserName">{{ShopUserName}}</div>
      </div>
      <div class="description" v-html='Description'></div>
      <div class='timeout' v-html='timeText' v-if='OpenStatu'></div>
      <div class='ing' v-html='Summary' v-if='!OpenStatu'></div>
      <filte :filterobj='filterobj'></filte>
      <list :list='NewItems' :flage='true' v-if='NewItems.length > 0'></list>
      <div class="oldlist" v-if='PassItems.length > 0'>近期好货</div>
      <list :list='PassItems' :flage='false' v-if='PassItems.length > 0'></list>
    </mt-loadmore>
  </div>
</template>

<script>
  const imgutil = require('../../common/until.js')
  const timeutity = require('../../common/timeutil.js')
  import Vue from 'vue'
  import { Loadmore, Indicator, Toast } from 'mint-ui'
  import list from '../compontents/list'
  import filte from '../compontents/filte'
  Vue.component(Loadmore.name, Loadmore)
  Vue.component(list.name, list)
  Vue.component(filte.name, filte)
  export default {
    name: 'detail',
    data () {
      return {
        NewItems: [],
        PassItems: [],
        tempList: [],
        allLoaded: false,
        pageIndex: 1,
        pagesize: 20,
        displaymode: 0,
        qsid: this.$route.query.qsid,
        CurrentMenuID: Number,
        Description: String,
        ID: Number,
        Name: String,  
        ShopUserName: String,
        AppCover: '',
        ShopUserID: Number,
        timer: null,
        OpenStatu: true,
        timeText: '',
        Summary: '', 
        filterobj: {AreaID :1,Datas:JSON.stringify({ID:this.$route.query.qsid})},
        firstFlag: true
      }
    },
    computed: {
      sort(){
        return this.$store.getters.getSort || 0
      },
      filterValues(){
        return this.$store.getters.getFilterValues || {}
      },
    },
    created: function () {
      this.$store.commit('changeSort',0)
      this.$store.commit('changeFilterValues',{})
    },
    methods: {
      init:function(type){
        const that = this
        clearInterval(that.timer)
        let datObj = {pageIndex: that.pageIndex,pagesize: that.pagesize,qsid: that.qsid,sort: that.sort,displaymode: that.displaymode,filterValues: JSON.stringify(that.filterValues)}
        if(type == 1){
          Indicator.open()
        }
        that.$http('/pinhuoitem/getitemsv2',datObj,function(res){
          Indicator.close()
          if(res.Result){
            if(that.firstFlag){
              that.firstFlag = false
              res.Data.Info.SortMenus.map(item => {
                item.selected = true;
                if((that.sort == 4 && item.Value == 5) || (that.sort == 5 && item.Value == 4)) {
                  item.selected = false;
                }else if(that.sort !== 4 && that.sort !== 5) {
                    if(item.Value == 5) {
                      item.selected = false;
                    }
                }
              })
              //that.$store.commit('changeMenus',[])
              that.$store.commit('changeMenus',res.Data.Info.SortMenus)
            }else if(type == 2){
              that.NewItems = []
              that.PassItems = []
              that.tempList = []
              that.allLoaded = false
              that.$refs.loadmore.onTopLoaded()
            }else if(type == 3){
              that.$refs.loadmore.onBottomLoaded()
            }else if(type == 4){
              Indicator.close()
              that.NewItems = []
              that.PassItems = []
              that.tempList = []
              that.allLoaded = false
              document.body.scrollTop = 0
              document.documentElement.scrollTop = 0
            }


            if(res.Data.Info.OpenStatu == '预告'){
              that.OpenStatu = false
              that.Summary = res.Data.Info.Summary
            }else if(res.Data.Info.OpenStatu == '开拼中'){
              that.OpenStatu = true
              var toTime = res.Data.Info.ToTime.split(/[^0-9]/)
              var toTimeG = new Date(toTime[0], toTime[1] - 1, toTime[2], toTime[3], toTime[4], toTime[5])
              var duringMs = toTimeG.getTime() - (new Date()).getTime()
              that.timer = setInterval(function(){
                duringMs = duringMs - 1000
                that.timeText = '距截单 '+timeutity.date_format(duringMs)
              },1000)
            }

            res.Data.NewItems.map(item => {
              item.Cover = imgutil.getUrl(item.Cover, 300)
            })
            res.Data.PassItems.map(item => {
              item.Cover = imgutil.getUrl(item.Cover, 300)
            })
            if(that.displaymode == 0){
              if(res.Data.NewItems.length == that.pagesize){
                that.NewItems = res.Data.NewItems
                that.tempList = res.Data.PassItems;
                that.displaymode = 1;
                that.allLoaded = false;
                that.pageIndex = 2;
              }else if(res.Data.NewItems.length < that.pagesize && res.Data.PassItems.length == that.pagesize){
                that.NewItems = res.Data.NewItems
                that.PassItems = res.Data.PassItems;
                that.displaymode = 2;
                that.allLoaded = false;
                that.pageIndex = 2;
              }else{
                that.NewItems = res.Data.NewItems
                that.PassItems = res.Data.PassItems;
                that.displaymode = 2;
                that.allLoaded = true;
                that.pageIndex = 2;

              }
              that.CurrentMenuID = res.Data.Info.CurrentMenuID
              that.Description = res.Data.Info.Description
              that.ID = res.Data.Info.ID
              that.Name = res.Data.Info.Name
              that.ShopUserName = res.Data.Info.ShopUserName 
              that.AppCover = res.Data.Info.AppCover
              that.ShopUserID = res.Data.Info.ShopUserID
            }else if(that.displaymode == 1){
              if(res.Data.NewItems.length == that.pagesize){
                that.NewItems = that.NewItems.concat(res.Data.NewItems)
                that.displaymode = 1
                that.allLoaded = false
                that.pageIndex++
              }else if(that.tempList.length == that.pagesize){
                that.NewItems = that.NewItems.concat(res.Data.NewItems)
                that.PassItems = that.tempList
                that.displaymode = 2
                that.allLoaded = false
                that.pageIndex = 2
              }else{
                that.NewItems = that.NewItems.concat(res.Data.NewItems)
                that.PassItems = that.tempList
                that.displaymode = 2
                that.allLoaded = true
                that.pageIndex = 2
              }
            }else if(that.displaymode == 2){
              if(res.Data.PassItems.length == that.pagesize){
                that.PassItems = that.PassItems.concat(res.Data.PassItems)
                that.displaymode = 2
                that.allLoaded = false
                that.pageIndex++
              }else{
                that.PassItems = that.PassItems.concat(res.Data.PassItems)
                that.allLoaded = true
                that.pageIndex++
              }
            }
            if(that.allLoaded){
              Toast({
                message:'没有更多数据了！',
                position: 'bottom',
                duration: 1500
              })
            }
          }
        },'GET')
      },
      loadTop: function(){
        this.displaymode = 0
        this.pageIndex = 1
        this.init(2)
      },
      loadBottom: function(){
        this.init(3)
      },
    },
    watch:{
      'filterValues': function(){
        Indicator.open()
        this.pageIndex = 1
        this.displaymode = 0
        this.init(4)
      },
      'sort': function(){
        Indicator.open()
        this.pageIndex = 1
        this.displaymode = 0
        this.init(4)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top_box{width: 100%;height: auto;position: relative;margin-bottom: 12%;}
  .top_box img{width: 100%;}
  .top_box .logo{width: 20%;position: absolute;left: 6%;bottom:-20%;border-radius: 100%;}
  .top_box .shopUserName{font-size: 18px;color: #333;position: absolute;left: 30%;bottom: -30px;}
  .description{font-size: 12px;color: #333;padding: 10px 4%;}
  .timeout{width:60%;margin: 10px auto;text-align: center;background-color: #c60a1e;border-radius: 40px;color: #fff;padding: 5px 0;font-size: 14px;}
  .ing{border:1px solid red; margin: 10px 5px;padding: 15px 0;text-align: center;font-size: 14px;color: red;}
  .oldlist{width: 100%;text-align: center;padding: 10px;font-size: 16px;color: #000;}
</style>
